<template>
    <!-- 为“Echarts”准备一个具备宽度和高度的DOM容器↓ -->
  <div ref="main" :class="className" :style="{height:height,width:width}"></div>
</template>
<script>
// 引入“Echarts”模块
import echarts from "echarts"
// 引入主题（文件）
require('echarts/theme/macarons')
import resize from './mixins/resize' // ←左边这项表示“重置图表的大小，让图表自适应浏览器窗口的大小”
export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: "chart"
        },
        width: {
            type: String,
            default: "100%"
        },
        height: {
            type: String,
            default: "400px"
        },
        xAxisData: { // ←左边这项表示“X轴显示的数据”
            type: Array,
            // default:[] // ←注意：在此处不能直接写“default:[]”，而是要用下面的这种方法，写一个方法，在这个方法里返回一个数组，这样才行↓
            /* function(){
                        return []
                    } */
            default:
                // 把上面的这个方法↑改写成使用“箭头函数”的形式（因为在方法（函数）体中只有一行代码，并且这行代码是返回值，所以可以把方法（函数）体外面的大括号省略）↓
                // ()=>[]
                () => ["2022-02", "2022-03", "2022-04", "2022-05", "2022-06", "2022-07"]
        },
        seriesData: {// ←左边这项表示“在柱状图中被接收的数据”
            type: Array,
            default: () => [10, 52, 200, 334, 390, 330]
        }
    },
    data() {
        return {
        chart: null // ←左边这个属性被用于接收（引用）echarts实例
        }
    },
    mounted() {
        // 当加载DOM（容器）后，会调用“this.initChart()”来进行初始化echarts实例
        this.$nextTick(() => {
        this.initChart()
        })
    },
    // 在组件被销毁之前会调用此钩子函数
    beforeDestroy() {
        if (!this.chart) {
        return
        }
        // 注销实例
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        // 关于图表的初始化配置
        initChart() {
            // 初始化echarts实例
            // 第二个参数可以指定前面引入的主题（即被引用的主题）
            // var chart = echarts.init(this.$refs.main)
            this.chart = echarts.init(this.$refs.main,'macarons')
            // 图表的配置项
            this.chart.setOption({
                // color:['#3398DB']
                title: { // ←左边这项表示“图表展示时的标题”
                    text:'近6个月发布的文章数',
                    left:'center', // ←左边这项表示“居中对齐”
                },
                tooltip: { // ←左边这项表示“提示框”
                    trigger: 'axis',
                    axisPointer: { // ←左边这项表示“坐标轴指示器”，在坐标轴被触发时有效
                        type: 'shadow' // ←左边这项默认为直线（虚线），可选“line”或“shadow”（在鼠标放上去时会显示阴影）
                    }
                },
                grid: { // ←左边这项表示“柱状图的整体位置”
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true // ←左边这项表示“‘grid’区域是否包含坐标轴的刻度标签”
                },
                xAxis: [ // ←左边这项表示“X轴”
                    {
                        type: 'category', // ←此处被固定为“category”
                        data: this.xAxisData,
                        axisTick: { // ←左边这项表示“坐标轴刻度相关设置”
                            alignWithLabel: true // ←左边这项在“boundaryGap”为“true”的时候有效，可以保证X轴的刻度线和标签对齐
                        }
                    }
                ],
                yAxis: [ // ←左边这项表示“Y轴”
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '发布数',
                        type: 'bar', // ←左边这项表示“柱状图”
                        barWidth: '60%', // ←左边这项表示“每个柱子的宽度”
                        data: this.seriesData
                    }
                ]
            })
        }
    }
}
</script>